<template>
	
	<view class="foremanGroup-item">
		<view class="foreman">
			<view class="left">
				<image :src="item.headerImgUrl" mode="aspectFill"></image>
			</view>
			<view class="center">
				<view class="name">{{ item.realName }}</view>
				<view class="starGroup">
					<uni-rate class="star" :value="item.score" size="18" margin="3"></uni-rate>
					<text class="text-gray fraction">{{ item.score }}分</text>
				</view>
			</view>
			<view class="right">
				<slot></slot>
			</view>
		</view>
		<view class="describe">{{item.intro}}</view>
	</view>
	
</template>

<script>
	import uniRate from './uni-rate.vue';
	export default {
		components:{uniRate},
		name:"worker-detail",
		props:{
			item : {} 
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">


.foremanGroup-item{
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 10px;
	padding: 15px;
	border: 1px solid #eee;
	box-shadow:0 0px 9px rgba(0, 0, 0, 0.1);
	.foreman{
		padding-left: 80px;
		padding-right: 70px;
		position: relative;
		min-height:70px;
		>.left{
			position: absolute;
			left: 0;
			top: 0;
			width: 70px;
			image{
				width: 100%;
				height: 70px;
				border-radius: 100%;
				
			}
		}
		.center{
			width: 100%;
			padding-top: 10px;
			.starGroup{
				&:after{
					content:"";
					clear: both;
					display: block;
					visibility: hidden;
					height: 0;
				}
				.star{
					float: left;
					margin-top: 0;
					margin-right: 10px;
					vertical-align: middle;
				}
				.fraction{
					float: left;
					vertical-align: middle;
				}
				
			}
		}
		.right{
			position: absolute;
			right: 0;
			top: 20PX;
		}
	}

	& +.item{
		margin-top: 7px;
	}
	
	.describe{
		margin-top: 10px;
		color: #777;
	}
}
</style>
